<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机图片</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 100px; width: 100px">
    <img src="img/01.jpg" id="small" style="width: 100px; height: 100px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
    <img src="" id="big" style="width: 400px; height: 400px; display:none;">
</div>

<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.准备一个数组
    let imgs = [
        "img/01.jpg",
        "img/02.jpg",
        "img/03.jpg",
        "img/04.jpg",
        "img/05.jpg",
        "img/06.jpg",
        "img/07.jpg",
        "img/08.jpg",
        "img/09.jpg",
        "img/10.jpg"
    ];
    let timmerId;
    let index ;
    //设置开始按钮可以用,停止按钮不可用
    $("#startBtn").prop("disabled",false);
    $("#stopBtn").prop("disabled",true);

    //开始按钮
    //1.给"开始按钮"绑定属性
    $("#startBtn").click(function () {

      //设置开始按钮不可用,停止按钮可用
      $("#startBtn").prop("disabled",true);
      $("#stopBtn").prop("disabled",false);


        //2.启动循环定时器,每隔20ms执行函数
     timmerId = setInterval(() => {

         //3.随机生成图片索引
           index = Math.floor(Math.random()*10);

            //4.在函数内部,给id="small"的img设置src属性
           $("#small").attr("src",imgs[index]);
        }, 10)
    });

    //停止按钮
     //1.给"停止按钮"绑定click事件
    $("#stopBtn").click(function () {

        //设置开始按钮不可用,停止按钮可用
        $("#startBtn").prop("disabled",false);
        $("#stopBtn").prop("disabled",true);
        //2.停止定时器
        clearInterval(timmerId)
        //3.给id="big"的img设置src属性
        $("#big").attr("src",imgs[index]).hide().show(2000);
    });



</script>
</html>